Fric-frac Person UpdatingOne wireframe omzetten naar HTML

Probleem

De UpdateOne use case toont de details van de gekozen rij en implementeert twee mogelijke use cases:

1. Update
2. Annuleren

Design

Oplossing

1. Maak een een bestand met de naam /Views/Person/UpdatingOne.cshtml. Het bestand is van het type MVC View Page with Layout (Razor). Kies dus MasterLayout.cshtml als lay-out pagina.
2. Kopieer de inhoud van bestand met de naam /Views/Person/ReadingOne.cshtml naar het nieuw toegevoegd bestand /Views/Person/UpdateOne.cshtml. Zorg ervoor dat je maar één keer naar de MasterLayout.cstml pagina verwijst.
3. In de div met id command-panel voeg je de juiste knoppen met de overeenstemmende iconen toe.
4. Na de aside met id list voeg je het fieldset element toe met daarin de label en input elementen. We volgen de volgende afspraken:
   1. het name en id attribuut hebben dezelfde waarde
   2. deze waarde is samengesteld uit het zelfstandig naamwoord en werkwoord van de use case gescheiden door een koppelteken
      1. het zelfstandig naamwoord is de naam van de entiteit (pascalnotatie)
      2. het werkwoord is de naam van de kolom (pascalnotatie)
5. Gebruik het for attribuut van het label om aan te geven bij welke input het label hoort.
6. Als dit een verplichte kolom is (not null in MySQL) voor het required attribuut toe. Om te weten te komen als het een verplichte kolom is in MySQL zie Fric-frac Logisch model.
7. Hier volgt de code:

   @{
       Layout = "~/Views/Shared/MasterLayout.cshtml";
   }
   <nav class="control-panel">
       <a href="/Home/Index" class="tile _14x1">
           <span class="icon-menu2"></span>
           <span class="screen-reader-text">Home</span>
       </a>
       <h1>Fric-frac</h1>
   </nav>
   <form class="show-room entity" action="/Person/Index" method="post">
       <div class="detail">
           <div class="command-panel">
               <h2>Persoon</h2>
               <a href="/Person/UpdateOne" class="tile">
                   <span class="icon-plus"></span>
                   <span class="screen-reader-text">Update One</span>
               </a>
               <a href="/Person/Cancel" class="tile">
                   <span class="icon-close"></span>
                   <span class="screen-reader-text">Annuleren</span>
               </a>
           </div>
           <fieldset>
               <div>
                   <label for="Person-FirstName">Voornaam</label>
                   <input id="Person-FirstName" name="Person-FirstName" type="text" value="" required />
               </div>
               <div>
                   <label for="Person-LastName">Familienaam</label>
                   <input id="Person-LastName" name="Person-LastName" type="text" value="" required />
               </div>
               <div>
                   <label for="Person-Email">E-mail</label>
                   <input id="Person-Email" name="Person-Email" type="email" value="" />
               </div>
               <div>
                   <label for="Person-Address1">Adres 1</label>
                   <input id="Person-Address1" name="Person-Address1" type="text" value="" />
               </div>
               <div>
                   <label for="Person-Address2">Adres 2</label>
                   <input id="Person-Address2" name="Person-Address2" type="text" value="" />
               </div>
               <div>
                   <label for="Person-PostalCode">Postcode</label>
                   <input id="Person-PostalCode" name="Person-PostalCode" type="text" value=""/>
               </div>
               <div>
                   <label for="Person-City">Stad</label>
                   <input id="Person-City" name="Person-City" type="text" value="" />
               </div>
               <div>
                   <label for="Person-Country">Land</label>
                   <select id="Person-Country" name="Person-Country">
                       <option value="BE" selected>België</option>
                       <option value="DE" selected>Duitsland</option>
                       <option value="FR" selected>Frankrijk</option>
                       <option value="NL" selected>Nederland</option>
                       <option value="UK" selected>Verenigd Koninkrijk</option>
                   </select>
               </div>
               <div>
                   <label for="Person-Phone1">Telefoon</label>
                   <input id="Person-Phone1" name="Person-Phone1" type="text" value="" />
               </div>
               <div>
                   <label for="Person-Birthday">Stad</label>
                   <input id="Person-Birthday" name="Person-Birthday" type="date" value="" />
               </div>
           </fieldset>
           <div class="feedback"></div>
       </div>
       <aside class="list">
           <table></table>
       </aside>
   </form>